<template>
    <div class="watch" v-if="show">

        <div id="watch" :class="watch_class">

            <!--S标题-->
            <h2>
                <span>表单内容</span>
                <i
                        class="close iconfont icon-guanbi"
                        @click="$emit('close')"
                >
                </i>
            </h2>
            <!--E标题-->

            <!--S表单内容-->
            <form-content :form_id="form_id">
            </form-content>
            <!--E表单内容-->

        </div>

    </div>
</template>

<script>
import FormContent from "../../../../components/form-content"
export default {
    name: "watch",
    data () {
        return {
            // id 编辑区域class，控制打开关闭的动画
            watch_class: "close"
        }
    },
    props: {
        // 区域显示状态
        show: {
            type: Boolean,
            default: false
        },
        form_id: {
            type: Number
        }
    },
    components: {
        FormContent
    },
    watch: {
        // 显示状态改变
        show() {
            this.toggle()
        }
    },
    methods: {
        /**
         * 显示隐藏区域
         */
        toggle() {
            if (this.show) {
                setTimeout(() => {
                    this.watch_class = 'open'
                }, 100)
            } else {
                this.watch_class = 'close'
            }
        },
    }
}
</script>

<style scoped lang="less" src="./watch.less"></style>